<template>
  <el-card>
    <h2 style="margin-bottom: 24px;">商品数据总览</h2>
    <el-row :gutter="24">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">商品总数</div>
          <div class="stat-value">12,800</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">上架商品</div>
          <div class="stat-value">9,600</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">下架商品</div>
          <div class="stat-value">2,100</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">售罄商品</div>
          <div class="stat-value">1,100</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 32px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">商品分类分布</div>
          <div id="category-chart" style="height:300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">商品标签分布</div>
          <div id="tag-chart" style="height:300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 32px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">平台商品分布</div>
          <div id="platform-chart" style="height:300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">价格区间分布</div>
          <div id="price-chart" style="height:300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 32px;">
      <el-col :span="24">
        <el-card>
          <div class="chart-title">商品新增趋势</div>
          <div id="trend-chart" style="height:360px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  // 分类分布
  const categoryChart = echarts.init(document.getElementById('category-chart')!)
  categoryChart.setOption({
    tooltip: {},
    legend: { data: ['商品数'] },
    xAxis: { data: ['服饰', '美妆', '家电', '食品', '图书'] },
    yAxis: {},
    series: [{ name: '商品数', type: 'bar', data: [3200, 2100, 1800, 1500, 900], itemStyle: { color: '#67C23A' } }]
  })
  // 标签分布
  const tagChart = echarts.init(document.getElementById('tag-chart')!)
  tagChart.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: '5%', left: 'center' },
    series: [{
      name: '标签分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
      labelLine: { show: false },
      data: [
        { value: 3000, name: '新品' },
        { value: 2500, name: '热卖' },
        { value: 1800, name: '限时' },
        { value: 1200, name: '进口' },
        { value: 900, name: '特价' }
      ]
    }]
  })
  // 平台分布
  const platformChart = echarts.init(document.getElementById('platform-chart')!)
  platformChart.setOption({
    tooltip: {},
    legend: { data: ['商品数'] },
    xAxis: { data: ['煤炉', '雅虎日拍', '雅虎闲置', '乐天闲置'] },
    yAxis: {},
    series: [{ name: '商品数', type: 'bar', data: [4200, 3100, 2600, 1800], itemStyle: { color: '#409EFF' } }]
  })
  // 价格区间分布
  const priceChart = echarts.init(document.getElementById('price-chart')!)
  priceChart.setOption({
    tooltip: {},
    legend: { data: ['商品数'] },
    xAxis: { data: ['0-100', '100-300', '300-500', '500-1000', '1000+'] },
    yAxis: {},
    series: [{ name: '商品数', type: 'bar', data: [1200, 3200, 2800, 2100, 1500], itemStyle: { color: '#E6A23C' } }]
  })
  // 新增趋势
  const trendChart = echarts.init(document.getElementById('trend-chart')!)
  trendChart.setOption({
    tooltip: {},
    xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] },
    yAxis: { type: 'value' },
    series: [{ name: '新增商品', type: 'line', data: [320, 410, 380, 500, 600, 700, 800, 900, 850, 780, 650, 500], itemStyle: { color: '#F56C6C' } }]
  })
})
</script>

<style scoped>
.stat-card {
  text-align: center;
  padding: 18px 0;
}
.stat-title {
  font-size: 15px;
  color: #888;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: var(--theme-color);
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
</style> 